<!-- 在外 库存详情 （内嵌地图）-->
<template>
  <div>
    <div class="app-container" style="padding: 0">

      <el-table border:data="tableData" header-cell-class-name="table-header" style="width: 100%;margin-top: 20px">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="equipmentTypeName" show-overflow-tooltip label="器材名称"></el-table-column>
        <el-table-column prop="currentTargetLocationName" show-overflow-tooltip label="器材位置"></el-table-column>
        <el-table-column prop="stockAmount" show-overflow-tooltip label="数量"></el-table-column>
      </el-table>

      <!-- 分页DIV -->
      <div style="text-align: right;margin-top: 20px">
        <el-pagination
          background
          @size-change="handleExceptionSizeChange"
          @current-change="handleExceptionCurrentChange"
          :current-page="currentDetailPage"
          :page-sizes="[10, 15, 30]"
          :page-size="detailPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="detailTotal">
        </el-pagination>
      </div>
    </div>

    <!-- 地图DIV -->
    <div class="amap-wrapper">
      <!-- 直接使用vue-amap -->
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        expandZoomRange="true"
        :zoom="zoom"
        :plugin="plugins"
        :pitch="66">
        <el-amap-marker
          v-for="(item,index) in marks"
          :key="index"
          :position="item.position"
          :label="item.label"
          :icon="centerIcon"/>
      </el-amap>
    </div>
  </div>
</template>


<script>
//TODO 李怀北 页面测试通过，但是还有很多报错需要处理
import { getDetailOutList } from '@/api/warehouse'


export default {
  name: 'StockDetail',
  //父传子第四步：接收变量
  props:['parentEquipmentTypeId','parentWarehouseId'],//接受父级传递的数据（组件在dialog中，需要通过组件属性传递参数值；如果直接使用组件则可以直接获取属性）

  data() {
    return {
      zoom: 15,
      centerIcon: require('@/assets/images/logo.png'),
      center: [119.72899, 30.254775],
      marks: [],
      centerLabel: {
        content: '当前位置',
        offset: [-8, 36],
        direction: 'bottom'
      },
      plugins: [
        {
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 100, //超过10秒后停止定位，默认：无穷大
          maximumAge: 0, //定位结果缓存0毫秒，默认：0
          convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, //显示定位按钮，默认：true
          buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: 'all',
          // 地图定位按钮
          pName: 'Geolocation',
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result)
              if (result && result.position) {
                self.lng = result.position.lng
                self.lat = result.position.lat
                self.center = [self.lng, self.lat]
                self.loaded = true
                self.$nextTick()
              }
            })
          }
        },
        {
          // 地图工具条
          pName: 'ToolBar',
          init(o) {
          }
        },
        {
          // 左下角缩略图插件 比例尺
          pName: 'Scale',
          init(o) {
          }
        }
      ],
      currentPage: 1,
      total: 0,
      pageSize: 5,
      tableData: []
    }
  },
  mounted() {
    this.getDetailTableData()
  },
  methods: {
    getDetailTableData() {
      const param = { page: this.currentPage, rows: this.pageSize, warehouseId: this.parentWarehouseId ,equipmentTypeId: this.parentEquipmentTypeId}
      getDetailOutList(param).then(res => {
        // console.log("返回数据长度："+res.resultData.length);
        this.tableData = res.resultData
        this.total = res.total

        if (this.tableData.length > 0) {
          this.marks = []
          //设置覆盖物信息
          this.tableData.forEach(item => {
            this.marks.push({
              position: [item.longitude, item.latitude],
              currentTargetLocationName: item.currentTargetLocationName,//位置名称（仓库名称）
              label: {
                content: item.currentTargetLocationName+"："+item.stockAmount,//库存数量
                offset: [-8, 36],
                direction: 'bottom'
              }
            })
          })
        }
        this.center = [this.marks[0].position[0], this.marks[0].position[1]]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.amap-wrapper {
  width: 100%;
  height: 450px;

  ::v-deep .amap-marker-label {
    position: absolute;
    z-index: 2;
    border: 0px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    cursor: default;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #fff;
  }

  ::v-deep .amap-icon img {
    width: 34px;
    height: 34px;
  }

  ::v-deep .amap-marker img {
    width: 34px;
    height: 34px;
  }
}

</style>
